<template>
  <div class="left-card-3">
    <HeaderTitle :imgUrl="`reserveStatistics-img`"></HeaderTitle>
    <div class="left-card-3-echarts">
      <echartVue :series="series" :yAxis="yAxis" :legend="{ show: false }" />
    </div>
  </div>
</template>
<script setup>
import echartVue from '@/components/echarts/dynamicBar/index.vue';

const pData = {
  北京: 12,
  上海: 23,
  广东: 14,
  江苏: 43,
  湖北: 35
};

const timer = setInterval(function () {
  const num = parseInt(Math.random() * 20);
  const arr = Object.keys(pData);
  const index = parseInt(Math.random() * arr.length);
  pData[arr[index]] += num;
  yAxis.value.data = Object.keys(pData);
  series.value[0].data = Object.values(pData);
}, 1000);

const yAxis = ref({
  data: Object.keys(pData)
});

const series = ref([
  {
    // realtimeSort: true, //是否自动排序
    name: '全国实时旅游人数',
    type: 'bar',
    data: Object.values(pData),
    label: {
      show: true,
      position: 'right',
      valueAnimation: true
    },
    barWidth: 20
  }
]);

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>
